<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" v-show="showSearch">
            <el-form-item label="id">
                <el-input
                    v-model="queryParams.id"
                    placeholder="请输入id"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="充值订单号">
                <el-input
                    v-model="queryParams.deposit_id"
                    placeholder="请输入充值订单号"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="消费金额">
                <el-input
                    v-model="queryParams.price"
                    placeholder="请输入消费金额"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="消费订单ID">
                <el-input
                    v-model="queryParams.order_id"
                    placeholder="请输入消费订单ID"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                    v-model="queryParams.create_time"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择创建时间"
                />
            </el-form-item>
            <el-form-item label="&nbsp;">
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="Download"
                    @click="handleExport"
                >导出
                </el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="list">
            <el-table-column label="ID" align="center" prop="id"/>
            <el-table-column label="充值订单号" align="center" prop="deposit_id" />
            <el-table-column label="消费金额" align="center" prop="price" />
            <el-table-column label="消费订单ID" align="center" prop="order_id" />
            <el-table-column label="创建时间" align="center" prop="create_time" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
    </div>
</template>

<script setup name="RechargeRecord">
import * as api from "@/api/finance/recharge";
import DictTag from "@/components/DictTag/index.vue";
import {getCurrentInstance, reactive, ref, toRefs} from "vue";

const props = defineProps({
    recharge_id: {
        type: Number,
        required: true
    }
});

const {proxy} = getCurrentInstance();

const list = ref([]);
const loading = ref(true);
const showSearch = ref(false);
const total = ref(0);

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        userid: props.uid
    },
    rules: {

    }
});

const {queryParams, form, rules} = toRefs(data);

/** 查询列表 */
function getList() {
    loading.value = true;
    console.log('getList', queryParams.value)
    api.listRecharge(queryParams.value).then(response => {
        list.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    dateRange.value = [];
    queryParams.value = {};
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download(api.EXPORT_URL, {
        ...queryParams.value
    }, `recharge_${new Date().getTime()}.xlsx`);
}

getList();
</script>
